<template>
  <div class="app-container">
    <h1>订单详情列表（紧凑单行版）</h1>

    <!-- 加载中 -->
    <div v-if="loading" class="loading-box">
      <span>正在加载订单数据...</span>
    </div>

    <!-- 空数据 -->
    <div v-else-if="orders.length === 0" class="no-data">
      暂无订单数据
    </div>

    <!-- 订单列表 - 单行表格 -->
    <div v-else class="table-container">
      <table class="compact-table">
        <thead>
          <tr>
            <th>订单ID</th>
            <th>拍摄时间</th>
            <th>名称</th>
            
            <th>客户名称</th>
            <!-- <th>客户备注</th> -->
            <th>类型</th>
            <th>服装类型</th>
            <th>角色IP</th>
            <th>Cos角色</th>
            <th>数量</th>
            <!-- <th>应付金额</th>
            <th>实收金额</th>
            <th>金额备注</th>
            <th>是否授权</th> -->
            <th>订单状态</th>
            <th>场地</th>
            <!-- <th>关联日程ID</th> -->
            <!-- <th>返图链接</th> -->
            <!-- <th>创建时间</th> -->
          </tr>
        </thead>
        <tbody>
          <tr v-for="order in orders" :key="order.orderId">
            <td>{{ order.orderId }}</td>
            <td>{{ order.time }}</td>
            <td>{{ order.name }}</td>
            <td>{{ order.customerName }}</td>
            <!-- <td :title="order.customerRemark">{{ order.customerRemark || '-' }}</td> -->
            <td>{{ order.type }}</td>
            <td>{{ order.clothType }}</td>
            <td>{{ order.cosIp || '-' }}</td>
            <td>{{ order.cosName || '-' }}</td>
            <td>{{ order.num || 0 }}</td>
            <!-- <td>{{ order.allPrice != null ? `¥${order.allPrice}` : '-' }}</td>
            <td>{{ order.realPrice != null ? `¥${order.realPrice}` : '-' }}</td>
            <td>{{ order.remark || '-' }}</td>
            <td>{{ order.isShow ? '是' : '否' }}</td> -->
            <td><strong>{{ order.status }}</strong></td>
            <td>{{ order.place }}</td>
            <!-- <td>{{ order.linkSchedule || '-' }}</td>
            <td>
              <a v-if="order.linkPic" :href="order.linkPic" target="_blank" rel="noopener">查看</a>
              <span v-else>-</span>
            </td> -->
            <!-- <td>{{ formatDate(order.createTime) }}</td> -->
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { getAllOrder } from "@/api/cd/order";

export default {
  name: 'CameraOrderListCompact',
  data() {
    return {
      orders: [],
      loading: false
    };
  },
  created() {
    this.fetchOrders();
  },
  methods: {
    async fetchOrders() {
      this.loading = true;
      try {
        const res = await getAllOrder();
        this.orders = Array.isArray(res.data) ? res.data : [];
      } catch (error) {
        console.error('获取订单失败:', error);
        this.$message?.error?.('加载订单失败');
      } finally {
        this.loading = false;
      }
    },
    formatDate(timestamp) {
      if (!timestamp) return '-';
      const date = new Date(timestamp);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 10px 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 18px;
  color: #333;
}

.loading-box,
.no-data {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 14px;
}

/* 允许横向滚动 */
.table-container {
  overflow-x: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}

.compact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.compact-table th,
.compact-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
  min-width: 80px;
}

.compact-table th {
  background-color: #f5f5f5;
  color: #333;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}

.compact-table td {
  color: #555;
}

.compact-table a {
  color: #1890ff;
  text-decoration: none;
  font-size: 12px;
}

.compact-table a:hover {
  text-decoration: underline;
}

/* 鼠标悬停高亮 */
.compact-table tbody tr:hover {
  background-color: #f9f9f9;
}
</style>